/*
 * @Description: 取消预约btn
 * @Author: buwei.huang
 * @Date: 2019-08-14 10:11:53
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-11 18:34:17
 */
<script>
import baseBtn from './baseBtn'
import { cancelReservation } from '../../api/api.js'
export default {
  extends: baseBtn,
  props: {
    isCancleWidth: {
      type: Boolean,
      default: null
    }
  },
  data() {
    return {
      btnText: '取消预约',
      btnClassName: this.isCancleWidth ? 're_btn_cancle_width' : 're_btn_cancle'
    }
  },
  methods: {
    btnEvent() {
      // console.log('canclebtn')
      this.$UI.then(UI => {
        UI.showDialog(
          '提示',
          '您确定要取消本次预约吗？',
          '确定',
          '再想想',
          msg => {
            if (msg == 0) { //eslint-disable-line
              cancelReservation().then(res => {
                // console.log(res)
                window.localStorage.setItem('onAfresh', true)
                this.$toastMsg('预约已取消')
                // 通知重新获取预约单状态状态
                setTimeout(() => {
                  this.$emit('afreshState')
                }, 500)
              }).catch(err => {
                console.dir(err)
                this.$toastMsg('预约取消失败，请稍后重试')
              })
            }
          },
          function (msg) { }
        )
      })
    }
  }
}
</script>
<style>
.re_btn_cancle {
  width: 240px;
  height: 64px;
  background-color: #fff;
  border: 1px solid rgba(2, 122, 255, 1) !important; /*no*/
  color: #027aff;
}
.re_btn_cancle:active {
  background-color: #fff;
}
.re_btn_cancle_width {
  width: 622px;
  height: 64px;
  color: #fff;
}
</style>
